<template>
    <div class="container-box">
        <div style="height: 98px;"></div>
        <!-- serch -->
        <div class="bgfffs filter_box" :style="contentStyleObj">
            <page-filter :className="className" lableWidth="70px" ref="from" :query.sync="filterInfo.query"
                :filter-list="filterInfo.list" :list-type-info="listTypeInfo" @handleClick="handleClick"
                @handleEvent="handleEvent" @upenter="upenter">
            </page-filter>
        </div>

        <div class="bgfff">
            <div class="btn-div" style="margin-left: 10px;">
                <el-button class="btn-middle" type="primary" @click="addUser" size="mini">添加用户</el-button>
            </div>
            <div class="tableHeight" ref="tableWrapper" style="padding: 10px 10px">
                <page-table :checkBox="false" ref="table" :tabIndex="true" :dataText="dataText" v-loading="loading"
                    :init-curpage="tableInfo.initCurpage" :data.sync="tableInfo.data" :pageParm="pageParm"
                    :query="filterInfo.query" :field-list="tableInfo.fieldList" :list-type-info="listTypeInfo"
                    :handle="tableInfo.handle" @handleClick="handleClick" @handleEvent="handleEvent">

                    <!-- 类型 -->
                    <template v-slot:col-invoice_type="scope">
                        <span v-if="scope.row.invoice_type == 0">
                            普票
                        </span>
                        <span v-else>专票</span>
                    </template>
                </page-table>
            </div>
        </div>

        <page-dialog :title="dialogInfo.title[dialogInfo.type]" :visible.sync="dialogInfo.visible"
            :width="dialogInfo.width" :bt-loading="dialogInfo.btLoading" :bt-list="dialogInfo.btList" shutEvent="close"
            @handleClick="handleClick" @handleEvent="handleEvent">
            <template v-slot>
                <!-- 添加 修改-->
                <el-form v-if="dialogInfo.type == 'add' || dialogInfo.type == 'edit'" label-position="left"
                    :inline="false" :model="form" ref="form" :rules="rules" class="user_form addFrom"
                    label-width="110px">
                    <el-form-item label="用户名：" prop="real_name">
                        <el-input v-model="form.real_name" clearable style="width: 200px" placeholder="请输入用户名"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" prop="phone">
                        <el-input v-model="form.phone" style="width: 200px" placeholder="请输入手机号" type="number"
                            @input="handleInput" auto-complete="off" clearable autocomplete="off"
                            @mousedown.native="nameMouse" :readonly="namebool"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" v-if="dialogInfo.type === 'add'" prop="pwd">
                        <el-input type="password" v-model="form.pwd" style="width: 200px" placeholder="请输入密码"
                            maxlength="12" auto-complete="off" clearable autocomplete="off"
                            @mousedown.native="nameMouse" :readonly="namebool"
                            @input.native="onInput($event, form.pwd)"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" v-if="dialogInfo.type === 'edit'">
                        <el-input type="password" v-model="form.pwd" style="width: 200px" placeholder="请输入密码"
                            maxlength="12" auto-complete="off" clearable autocomplete="off"
                            @mousedown.native="nameMouse" :readonly="namebool"
                            @input.native="onInput($event, form.pwd)"></el-input>
                    </el-form-item>
                    <el-form-item label="微信token：">
                        <el-input v-model="form.wechat_token" clearable style="width: 200px" placeholder="请输入"
                            autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="账户角色：" prop="role_name" autocomplete="off" v-if="is_super_admin == 0">
                        <el-select popper-class="select-css" class="selectcss" filterable v-model="form.role_name"
                            clearable placeholder="请选择账户角色" @change="changeRole">
                            <el-option v-for="item in role_id_list" :key="item.key" :label="item.value"
                                :value="{ id: item.key, value: item.value }">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="账户角色：" prop="role_name" autocomplete="off" v-else>
                        <el-select popper-class="select-css" class="selectcss" filterable v-model="form.role_name"
                            :disabled="true" placeholder="请选择账户角色" @change="changeRole">
                            <el-option v-for="item in role_id_list" :key="item.key" :label="item.value"
                                :value="{ id: item.key, value: item.value }">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="height: 100px;" label="账户权限：" autocomplete="off">
                        <el-checkbox-group v-model="checkList" @change="permissionInfo">
                            <el-checkbox v-for="(item) in permissionLists" :key="item.menus_id" :label="item.menus_id"
                                :disabled="item.menus_id == 1">{{
                                    item.name }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </template>
        </page-dialog>
    </div>
</template>
<script>
import PageDialog from "@/components/PageDialog";
import PageFilter from "@/components/PageFilter/index";
import PageTable from "@/components/PageTable/index";
import { formatter } from "@/utils/index";
import {
    getList,//列表
    searchCriteria, //基础参数
    userDel,//删除
    userAdd,//添加
    userEidt,//修改
    userStatus,//修改状态
    permissionList
} from '@/api/user'
export default {
    name: "paymentPage",
    components: {
        PageFilter,
        PageDialog,
        PageTable
    },
    data () {
        return {
            loading: false,
            dataText: "",
            contentStyleObj: {
                height: "100%"
            },
            namebool: true,
            refresh: false,
            showPassword: false,
            className: "forms",
            is_super_admin: 0,
            msg: "",
            form: {
                id: 0,
                real_name: "",
                phone: "",
                pwd: "",
                role_id: "",
                role_name: "",
                wechat_token: ""
            },
            // 权限列表
            permissionLists: [],
            // 选中权限
            checkList: [1],
            role_id_list: [
                {
                    key: 1,
                    value: "管理员"
                },
                {
                    key: 2,
                    value: "操作员"
                },
            ],
            rules: {
                real_name: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请填写用户名"
                    }
                ],
                phone: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请填写手机号"
                    }
                ],
                pwd: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入登录密码"
                    },
                    { min: 6, message: '密码长度至少为6位', trigger: "blur", },
                    { max: 12, message: '密码长度最多为12位', trigger: "blur", }
                ],

                role_name: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请选择账户角色"
                    }
                ],
            },
            // 相关列表
            listTypeInfo: {
                user_list: [], //用户列表
                status_list: [], //开票状态
            },

            // 弹窗相关
            dialogInfo: {
                width: "750px",
                title: {
                    add: "添加",
                    edit: "修改"
                },
                visible: false,
                type: "",
                btLoading: false,
                btList: [
                    {
                        label: "取消",
                        event: "close",
                        show: true
                    },
                    {
                        label: "确定",
                        type: "primary",
                        event: "save",
                        show: true
                    }
                ]
            },
            // 过滤相关配置
            filterInfo: {
                query: {
                    page: 1,
                    limit: 20,
                    user_id: "",
                    status: "",
                    phone: ""
                },
                list: [
                    {
                        type: "select",
                        label: "操作员",
                        value: "user_id",
                        list: "user_list",
                        key: "操作员"
                    },
                    {
                        type: "select",
                        label: "状态",
                        value: "status",
                        list: "status_list",
                        key: "状态"
                    },
                    {
                        type: "button",
                        label: "搜索",
                        btType: "primary",
                        event: "search",
                        show: true
                    },
                    {
                        type: "button",
                        label: "重置",
                        event: "reset",
                        show: true
                    }
                ]
            },
            // 分页参数
            pageParm: {
                tableHeight: "52vh", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    page: 1, // 当前页
                    limit: 20 // 每页条数
                }
            },
            // 表格相关
            tableInfo: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    { label: "操作员", value: "real_name", width: "100px" },
                    { label: "账号", value: "account", width: "100px" },
                    { label: "角色", value: "role_name" },
                    { label: "服务企业数", value: "service_count" },
                    { label: "客服链接", value: "wechat_token", width: "100px" },
                    { label: "当前状态", value: "status_text", width: "100px" },
                    { label: "添加时间", value: "add_time", width: "150px" },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "修改信息",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "modify",
                            show: true,
                        },
                        {
                            label: "删除",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "userdel",
                            show: true,
                            ifRender: row => {
                                if (row.is_super_admin == 1) {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                        },
                        {
                            label: "停用",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "updatestatus",
                            show: true,
                            ifRender: row => {
                                if (row.status == 1 && row.is_super_admin == 0) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                        {
                            label: "启用",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "updatestatus",
                            show: true,
                            ifRender: row => {
                                if (row.status == 0) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                    ]
                },
            },
        };
    },
    created () {
        this.init({ ...this.pageParm.query, ...this.filterInfo.query });
        this.getParamList();
        // this.getHeight();
        this.fetTableHeight()
        this.upenter();
        this.getPermissionList(0)
        //window.addEventListener("resize", this.getHeight);
    },
    //enter事件 与点击查询按钮功能一致
    updated () {
        var that = this;
    },
    activated () {
        this.init(this.filterInfo.query);
        this.getParamList();
        this.upenter();
        this.refresh = false;
    },
    deactivated () {
        this.refresh = true;
    },
    filters: {
        formatter (time) {
            let date = new Date(time),
                text = "";
            if (time !== "") return (text = formatter(date, "yyyy-MM"));
            return text;
        }
    },
    computed: {
    },

    methods: {
        addUser () {
            this.checkList = [1]
            this.is_super_admin = 0
            this.form.id = 0,
                this.form.real_name = "",
                this.form.phone = "",
                this.form.pwd = "",
                this.form.role_id = "",
                this.dialogInfo.type = "add";
            this.dialogInfo.visible = true;
            this.$nextTick(() => {
                this.$refs.form.clearValidate();
            });
        },
        handleInput (value) {
            // 使用正则表达式限制只能输入数字，并且长度不超过11位
            this.form.phone = value.replace(/[^0-9]/g, '').substring(0, 11);
        },
        // 更换角色
        changeRole (data) {
            console.log('角色---', data)
            if (data) {
                this.form.role_id = data.id;
                this.form.role_name = data.value;
            } else {
                this.form.role_id = "";
                this.form.role_name = "";
            }
        },
        // 获取权限列表
        getPermissionList (user_id) {
            const formData = new FormData();
            if (user_id != 0) {
                formData.append('user_id', user_id);
            }

            // 返回一个 Promise
            return new Promise((resolve, reject) => {
                permissionList(formData)
                    .then(res => {
                        console.log('我是权限菜单', res);
                        if (res.status === 200) {
                            this.permissionLists = res.data.list; // 更新权限列表
                            console.log('权限', this.permissionLists);
                            resolve(this.permissionLists); // 成功时解析 Promise
                        } else {
                            console.log(res.msg);
                            reject(new Error(res.msg)); // 拒绝 Promise，并传递错误信息
                        }
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        reject(error); // 拒绝 Promise，并传递错误
                    });
            });
        },
        // 权限复选框
        permissionInfo () {
            console.log(this.checkList, '我是权限');
        },
        unique (arr) {
            const res = new Map();
            return arr.filter(a => !res.has(a) && res.set(a, 1));
        },
        arrayAminusB (arrA, arrB) {
            return arrA.filter(v => !arrB.includes(v));
        },
        //enter 事件防止全局触发
        upenter () {
            var that = this;
            document.onkeydown = e => {
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                if (e.keyCode === 13 && e.target.baseURI.match("receivableVerification") && !that.showInvoice && !that.showReconciliation && !that.showDestroy && !that.dialogInfo.visible) {
                    console.log("回车事件", that.dialogInfo.visible);
                    //回车后执行搜索方法
                    that.filterInfo.query.page = 1;
                    that.pageParm.query.page = 1;
                    that.init(that.filterInfo.query);
                }
            };
        },

        getHeight () {
            if (this.contentStyleObj.height == "100%") {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 160;
            } else {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 146;
            }
            this.pageParm.tableHeight = height + "px";
        },
        // 重置table高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.pageParm.tableHeight = this.$refs.tableWrapper.getBoundingClientRect().height - 64
                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },

        init (data) {
            this.loading = true;
            let formData = new FormData();
            formData.append('status', data.status);
            formData.append('user_id', data.user_id);
            formData.append('phone', data.phone);
            formData.append('page', data.page);
            formData.append('limit', data.limit);
            getList(formData).then(res => {
                this.tableInfo.data = [];
                this.tableInfo.data = res.data.data;
                if (this.tableInfo.data.length === 0) {
                    this.dataText = "暂无数据";

                }

                this.pageParm.total = res.data.meta.total;
                this.loading = false;
            });

        },

        getParamList () {
            searchCriteria().then(res => {
                let {
                    user,
                    status,
                } = res.data;

                user = user.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                status = status.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                this.listTypeInfo.user_list = user;
                this.listTypeInfo.status_list = status;
            });

        },

        handleClick (event, data) {
            console.log(event, data);
            console.log('当前事件---', event)
            switch (event) {
                case "userdel":
                    this.$confirm("是否删除此用户，删除之后该用户将无法登陆?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('id', data.id)
                            userDel(formData).then(res => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: "success",
                                        message: res.msg
                                    });
                                    this.init(this.filterInfo.query);
                                }
                            });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消删除"
                            });
                        });
                    break;
                case "updatestatus":
                    if (data.status == 1) {
                        this.msg = "禁用";
                    } else {
                        this.msg = "启用";
                    }
                    this.$confirm(`是否确定${this.msg}此用户?`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('id', data.id)
                            formData.append('status', !data.status)
                            this.msg = ""
                            userStatus(formData).then(res => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: "success",
                                        message: res.msg
                                    });
                                    this.init(this.filterInfo.query);
                                }
                            });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消删除"
                            });
                        });
                    break;
                case "modify":
                    this.dialogInfo.type = "edit";
                    this.dialogInfo.visible = true;
                    this.is_super_admin = data.is_super_admin
                    this.form.real_name = data.real_name
                    this.form.account = data.account
                    this.form.phone = data.phone
                    this.form.pwd = ""
                    this.form.wechat_token = data.wechat_token
                    this.form.role_id = data.role_id
                    this.form.role_name = data.role_name
                    this.form.id = data.id
                    this.$nextTick(() => {
                        this.$refs.form.clearValidate();
                    });
                    this.getPermissionList(data.id).then(res => {
                        // 提取 status 为 1 的 menus_id 并赋值给 checkList
                        this.checkList = this.permissionLists
                            .filter(item => item.status === 1)
                            .map(item => item.menus_id);
                    })
                    console.log('表单数据---', this.form)
                    break;
                case "save":
                    // this.checkList = [1]
                    if (this.dialogInfo.type == "add") {
                        if (this.form.pwd.length < 6 || this.form.pwd.length > 12) {
                            this.$message({
                                type: "error",
                                message: '密码长度最低6位最长12位！'
                            });
                            return false;
                        }

                        // 遍历 permissionLists，更新状态或删除不匹配的对象
                        // const checkPermissionList = this.permissionLists.filter(item => {
                        //     if (this.checkList.includes(item.menus_id)) {
                        //         // 如果 checkList 中包含该 menus_id，更新状态
                        //         item.status = 1;
                        //         return true; // 保留该对象
                        //     } else {
                        //         return false; // 删除该对象
                        //     }
                        // });
                        // console.log('我是权限信息', checkPermissionList);

                        let formData = new FormData();
                        this.checkList.forEach((item, index) => {
                            formData.append(`menus_id[${index}]`, item)
                        })
                        formData.append('account', this.form.phone)
                        formData.append('real_name', this.form.real_name)
                        formData.append('phone', this.form.phone)
                        formData.append('pwd', this.form.pwd)
                        formData.append('wechat_token', this.form.wechat_token)
                        formData.append('role_id[0]', this.form.role_id)
                        userAdd(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                                this.dialogInfo.visible = false
                                this.init(this.filterInfo.query);
                                this.checkList = [1]
                            }
                        });
                    }
                    if (this.dialogInfo.type == "edit") {
                        if (this.form.pwd != '' && (this.form.pwd.length < 6 || this.form.pwd.length > 12)) {
                            this.$message({
                                type: "error",
                                message: '密码长度最低6位最长12位！'
                            });
                            return false;
                        }
                        let formData = new FormData();
                        formData.append('id', this.form.id)
                        formData.append('account', this.form.account)
                        formData.append('real_name', this.form.real_name)
                        formData.append('phone', this.form.phone)
                        formData.append('pwd', this.form.pwd)
                        formData.append('wechat_token', this.form.wechat_token)
                        formData.append('role_id[0]', this.form.role_id)
                        this.checkList.forEach((item, index) => {
                            formData.append(`menus_id[${index}]`, item)
                        })
                        userEidt(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                                this.dialogInfo.visible = false
                                this.form.id = 0;
                                this.form.phone = "";
                                this.form.real_name = "";
                                this.form.pwd = "";
                                this.form.wechat_token = "";
                                this.form.role_id = "";
                                this.form.role_name = "";
                                this.init(this.filterInfo.query);
                            }
                        });
                    }
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                case "reset":
                    for (let i in this.filterInfo.query) {
                        this.filterInfo.query[i] = "";
                    }
                    this.filterInfo.query.page = 1;
                    this.filterInfo.query.limit = 20;
                    this.pageParm.query.page = 1;
                    this.pageParm.query.limit = 20;
                    let datas = {};
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                case "close":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    this.form.id = 0;
                    this.form.phone = "";
                    this.form.real_name = "";
                    this.form.pwd = "";
                    this.form.wechat_token = "";
                    this.form.role_id = "";
                    this.form.role_name = "";
                    break;
            }
        },
        // 阻止浏览器默认记忆
        nameMouse (e) {
            if (e.target.localName == 'i') {
                this.$set(this.pagerequest, "empNm", "")
            }
            this.namebool = true;
            setTimeout(() => this.namebool = false, 0)
        },
        onInput (event, val) {
            if (val.length === 0) {
                // this.onBlur(event)
                // this.onFocus(event)
                this.namebool = true;
                setTimeout(() => this.namebool = false, 0)
            }
        },
        handleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "rowClick":
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                // 分页改变当前页
                case "curPage":
                    if (!data) return;
                    this.pageParm.query.page = data;
                    this.filterInfo.query.page = data;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                // 分页列表
                case "pageSize":
                    if (!data) return;
                    this.pageParm.query.limit = data;
                    this.filterInfo.query.limit = data;
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                default:
                    break;
            }
        },
    },
    // destroyed () {
    //     window.removeEventListener("resize", this.getHeight);
    // }
};
</script>
<style lang="scss">
.user_form {
    padding-left: 40px;
}

.taskList_box_title {
    padding-bottom: 20px;
    line-height: 40px;
}

.taskList_box {
    width: 600px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-right: -10px;
    border: 1px solid #ddd;
    line-height: 47px;
    width: 623px;

    .el-col {
        height: 60px;
        line-height: 40px;
        padding: 10px 0;

        .el-input-number {
            width: 140px;
        }
    }
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
::v-deep .addFrom .el-cascader--mini {
    width: 360px;
}

::v-deep .el-form-item--medium .el-form-item__label {
    height: 60px;
}

::v-deep .el-form-item--medium .el-form-item__content {
    height: 60px;
}

::v-deep .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 60%;
    left: 0;
}

.icon-box {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;

    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }
}

::v-deep .addFrom .el-cascader--mini {
    width: 360px;
}





::v-deep .moneycss {
    width: 120px;
}

.editicon:hover {
    cursor: pointer;
}

.imgggcss {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.excelcss:hover {
    cursor: pointer;
}

::v-deep .excelcss>.el-image__inner {
    vertical-align: middle;
}

.salecss {
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    width: 60px;
    /*限制宽度*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
    line-height: 0.9;
    /*数字与之前的文字对齐*/
}

.salecss:hover {
    cursor: pointer;
}

.recordTable {
    display: flex;
    flex-direction: column;
}

.concatcss {
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.concatcss_line {
    width: 360px;
    border: 1px dashed #c8b9b9;
}

::v-deep.el-form-item {
    margin-bottom: 0px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__label {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner,
.concatcss>.el-form-item>.el-form-item__content {
    height: 30px !important;
    line-height: 30px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner,
.el-form-item__content>.filter-input>.el-input__inner {
    width: 200px;
    height: 30px;
    font-size: 12px !important;
}

.moredestroyCss {
    ::v-deep.el-form-item {
        margin-bottom: 20px !important;
    }

    ::v-deep .el-input {
        width: 240px !important;
    }

    ::v-deep .el-input__inner {
        width: 240px !important;
    }

    .item {
        width: 330px;
        margin-top: 15px;

        &-title {
            font-size: 13px;
            color: #9BA2AA;
            padding-left: 15px;
            padding-bottom: 5px;
        }

        &-main {
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed #000;

            &-line {
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
            }

            &-title {
                width: 80px;
                color: #606266;
                font-size: 12px;
                font-weight: 700;

            }

            &-box {
                font-size: 12px;
                color: #606266;

                ::v-deep .el-input__inner {
                    width: 200px !important;
                }

                ::v-deep .el-input {
                    width: 200px !important;
                }
            }
        }
    }
}

.bgfff {
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bgfffs {
    background: #fff;
}

.tableHeight {
    flex: 1;
    box-sizing: border-box;
}

.filter_box {
    position: relative;
    // height: 64px;
    overflow: hidden;
    padding-right: 90px;

    .open {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #409EFF;
        cursor: pointer;
    }
}

.app-main {
    padding-top: 90px !important;
}

.container-box {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

::v-deep .pagination-container {
    margin-top: 0 !important;
}

.addicon {
    color: #409eff;
    font-size: 20px;
    vertical-align: middle;
}

.addicon:hover {
    cursor: pointer;
}
</style>